<!--  -->
<template>
  <div>
    <div>
      <el-button @click="lang = 'ch'">中文</el-button>
      <el-button @click="lang = 'en'">English</el-button>
    </div>
    <div>{{ t('sayHi') }}</div>
  </div>

</template>

<script>

export default {
  data() {
    return {
      // 要素1.当前语言设定
      lang: 'ch',
      // 要素2.准备字典材料
      message: {
        ch: {
          sayHi: '欢迎回来'
        },
        en: {
          sayHi: 'welcome back dear'
        }
      }
    }
  },
  methods: {
    // 要素3.翻译功能函数
    // 可以接收一个标识 , 根据当前的语言设定,返回对应的结果
    t(str) {
      // 1.根据语言设定拿出字典
      const dict = this.message[this.lang]
      // 2.在字典中查找对应翻译并返回
      const res = dict[str]
      return res
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
